<template>
	<view class="app-container">
		<u--form labelPosition="top" :model="form" :rules="rules" ref="form" labelWidth="80">
			<u-form-item prop="real_name" label="姓名" ref="item" class="form-item">
				<u--input :disabled="isAuth == 1" id="name" @focus="focus('name')" @blur="blur('name')" placeholder="请输入本人姓名" v-model="form.real_name"></u--input>
			</u-form-item>
			<u-form-item prop="cardId" label="身份证号" ref="item" class="form-item">
				<u--input :disabled="isAuth == 1" id="card" @focus="focus('card')" @blur="blur('card')" placeholder="请输入身份证号" v-model="form.cardId"></u--input>
			</u-form-item>
			<u-form-item ref="item" class="form-item" v-if="isAuth != 1">
				<button :loading="loading" class="btn" :class="{submit: !disabled}" :disabled="disabled" @click="submit">提 交</button>
			</u-form-item>
		</u--form>
	</view>
</template>

<script>
	import {setAutonym} from "@/api/user.js"
	export default {
		data() {
			return {
				form:{
					real_name:"",
					cardId:"",
				},
				loading:false,
				rules:{
					real_name: [{
						required: true,
						message: '请输入本人姓名',
						trigger: 'blur'
					}],
					cardId:[{
						required: true,
						message: '请输入身份证号',
						trigger:'blur'
					}]
				},
				isAuth: 1,
				// disabled: true,
			}
		},
		computed:{
			disabled(){
				let {real_name,cardId} = this.form;
				if(real_name.length >= 2 && real_name.length <= 4 && cardId.length == 18){
					return false
				}else{
					return true
				}
			}
		},
		onShow() {
			this.getInfo()
		},
		methods: {
			submit(){
				let _this = this
				this.$refs.form.validate().then(res => {
					this.loading = true;
					uni.showModal({
						title: '注意',
						content: '认证之后将不可更改，请注意信息是否正确',
						success: function (res) {
							if (res.confirm) {
								setAutonym(_this.form).then(res => {
									_this.loading = false;
									uni.navigateBack()
								}).catch(()=>{
									_this.loading = false;
								})
							} else if (res.cancel) {
								_this.loading = false;
								uni.navigateBack()
							}
						}
					});
				})
			},
			focus(el){
				let inputEl = document.getElementById(el);
				inputEl.classList.add('input')
			},
			blur(el){
				let inputEl = document.getElementById(el);
				inputEl.classList.remove('input')
			},
			getInfo() {
				this.$store.dispatch('user/getInfo').then(res => {
					console.log(res);
					let { isAuth,realName,cardId } = res
					this.isAuth = isAuth;
					if(this.isAuth){
						this.form = { 
							real_name: this.formatName(realName),
							cardId: this.formatCardId(cardId)
						}
					}else{
						this.form ={
							real_name: "",
							cardId: ""
						}
					}
				});
			},
			formatName(name){
				if(name.length == 2){
					return name.replace(/^(.).+$/,"$1*");
				} else{
					return name.replace(/^(.).+(.)$/,"$1*$2");
				}
			},
			formatCardId(cardId){
				return cardId.replace(/^(.{3}).+(.{2})$/,"$1************$2")
			}
		}
	}
</script>

<style lang="scss">
	.app-container{
		padding: 20px;
	}
	.form-item {
		.input{
			border-color: #29988b !important;
		}
		.btn {
			width: 100%;
		}
		.submit{
			color: #fff;
			background-image: linear-gradient(to right, #38dde5, #1891d6);
		}
	}
</style>
